<template>
    <div class="knowledgeInfo">
        <div class="kli-img">
            <img :src="knowledgeInfo.imgList[0].img" alt="">
        </div>
        <div class="kli-content">
            <p>{{knowledgeInfo.title}}</p>
            <p>{{knowledgeInfo.createDate}}</p>
            <p v-html="replaces(knowledgeInfo.content)"></p>
        </div>
        <div class="kli-btn" @click.stop="sky()">
          查看更多
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      knowledgeInfo: "" // 圈Id
    };
  },
  created() {
    this.objectId = this.$route.query.objectId;
  },
  mounted() {
    this.getKnowledgeInfo();
  },
  methods: {
    //获取知识谷信息
    getKnowledgeInfo() {
      this.$ajax({
        url: `${this.baseUrl}/api/indexApiController/getKnowledgeInfo`,
        data: {
          knowledgeId: this.objectId
        },
        success: res => {
          if (res.resultCode == 0) {
            this.knowledgeInfo = res.resultData;
            console.log(this.knowledgeInfo.content);
          }
        }
      });
    },
    // 点击评论跳转到下载页面
    sky() {
      this.$router.push({ path: "/download" });
    },
    replaces(str) {
       return str.replace(/[\r]/g, "").replace(/[\n]/g, "<br/>")
    }
  }
};
</script>
<style lang="less" scoped>
.knowledgeInfo {
    background-color: #fff;
    .kli-img {
        >img {
            height: 4.25rem;
            width: 100%;
        }
    }
    .kli-content {
        padding: 0 .10rem;
        >p{
            font-size: .26rem;
            color: #333;
            line-height: .5rem;
            &:nth-of-type(1) {
                font-size: .4rem;
                line-height: .8rem;
            }
            &:nth-of-type(2) {
                color: #999;
                line-height: .5rem;
            }
            &:nth-of-type(3) {
                font-size: .26rem;
            }
        }
    }
    .kli-btn {
        width: 100%;
        margin-top: .2rem;
        background-color: #509eff;
        font-size: .3rem;
        color: #fff;
        line-height: .8rem;
        text-align: center;
    }
}
</style>
